<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body class="df fcolumn">
    <!-- 轮播图 -->
    <div class="swiper mb20 rel">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../assets/imgs/myimgs/home-swiper1.jpg" alt=""> </div>
            <div class="swiper-slide"><img src="../../assets/imgs/myimgs/home-swiper2.jpg" alt=""> </div>
            <div class="swiper-slide"><img src="../../assets/imgs/myimgs/home-swiper3.jpg" alt=""> </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>


    <main class="flex">
        <!-- 今日排名 & 累积打卡 -->
        <div class="container df Rank">
            <div class="rank rel">
                <p>今日排名</p>
                <img src="../../assets/imgs/index-card-rank.png" alt="">
                <p class="num6 abs" id="ranking1"></p>
            </div>
            <div class="clock rel">
                <p>累计打卡<span id="clockcount1"></span>天</p>
                <img src="../../assets/imgs/index-card-sum.png" alt="">
                <button type="button" class="today-clock abs" id="clockBtn">今日打卡</button>
            </div>
        </div>

        <!-- 运动数据 & 积累运动徽章 -->
        <div class="container df Sport">
            <div class="sport">
                <p>运动数据</p>
            </div>
            <div class="badge rel">
                <p>积累运动徽章</p>
                <img src="../../assets/imgs/index-card-badge.png" alt="">
                <p class="Num abs"><span class="num0 " id="badges1"></span>枚</p>
            </div>
        </div>

        <!-- 课程训练&户外跑步 -->
        <div class="container df training fcolumn">
            <div class="course flex">
                <p><a href="course.html">课程训练</a></p>
            </div>
            <div class="run flex">
                <p><a href="run.html">户外跑步</a></p>
            </div>

        </div>
      
    </main>


    <!-- 页脚 -->
    <footer class="footerAll">
      
    </footer>


</body>

</html>